<template>
  <div class="card">
    <!-- header -->
    <van-nav-bar
      title="激活码"
      left-text="返回"
      class="card__nav"
      ref="header"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- content -->
    <van-cell-group class="card-main">
      <van-field
        v-model="activationCode"
        rows="2"
        autosize
        type="textarea"
        maxlength="150"
        placeholder="请输入激活码"
        show-word-limit
      />
      <van-button type="danger" block @click="onConfirmActivation">确认激活</van-button>
    </van-cell-group>
  </div>
</template>

<script>
export default {
  name: "Card",
  data() {
    return {
      activationCode: ""
    };
  },
  mounted() {
    const _this = this;
    this.$nextTick(() => {
      var statusBar = window.api.require("statusBar");
      //异步返回结果：
      statusBar.getStatusBarHeight(function(ret) {
        _this.$refs.header.$el.style.height = ret.statusHeight + 44 + "px";
        _this.$refs.header.$el.style.paddingTop = ret.statusHeight + "px";
        _this.$refs.header.$el.getElementsByClassName(
          "van-nav-bar__left"
        )[0].style.top = ret.statusHeight + "px";
      });
    });
  },
  methods: {
    // 返回
    onClickLeft() {
      window.api.closeWin();
    },
    // 激活
    onConfirmActivation() {
      const _this = this;
      window.api.ajax(
        {
          url: "http://118.25.10.223:8095/t/user/bind_activation_code",
          method: "post",
          dataType: "json",
          returnAll: false,
          data: {
            values: {
              activationCode: this.activationCode
            }
          },
          headers: {
            token: this.$storage.get("token")
          }
        },
        function(ret, err) {
          if (ret) {
            if (ret.code === 0) {
              _this.$toast("激活成功");
            } else {
              _this.$toast(ret.msg);
            }
          } else {
            this.$toast(err.msg);
          }
        }
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.card {
  width: 100%;
  @include flex(
    $direction: column,
    $justifyContent: flex-start,
    $flexWrap: nowrap
  );
  .card-main {
    width: 100%;
    .van-button {
      width: 343px;
      margin-left: 16px;
      margin-top: 30px;
      padding: 0 15px;
    }
  }
}
</style>
